<template>
  <div class="content">
    <span style="float: left;position: relative;top: 0.3125rem;">筛选查询</span>
    <div class="top">
      <span>项目</span>
      <el-select size="small" v-model="option.projectName" clearable  placeholder="全部">
        <el-option v-for="item in options.projectName" :key="item.projectName" :label="item.projectName" :value="item.projectName">
        </el-option>
      </el-select>
    </div>
    <div class="top">
      <span>登记时间</span>
      <el-date-picker size="small" v-model="option.defectCreattime" type="daterange" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <div class="top_button">
      <el-button @click="flush()" size="small">刷新</el-button>
      <el-button type="primary" name="but-insert" id="but-insert" @click="selectProption(options)" size="small">搜索
      </el-button>
      <el-button type="danger" name="but-delete" id="but-delete" @click="exportTo()" size="small">导出</el-button>
     <!-- <el-button type="danger" size="small"><a href="http://localhost:8888/StatisticAlanalysis/exportDefectType" >导出</a></el-button> -->
    </div>
<div id="main" style="height: 800px;width: 800px;">

</div>
  </div>

</template>

<script>
  import * as echarts from 'echarts';
  export default {


    name: 'Defecttyperate',

    data() {
      return {

        options: {
           value1: [],
          projectName:[]
        },
        option:{
          defectCreattime: [],
          projectName:''
        },
        Proption: {
         /* allcount: '',
          dataErrorProportion: '',
          LayoutErroProportion: '',
          fieldErroProportion: '',
          UndemandEtrroProportion: '' */
        },
        chartPie: null
      }
    },

    methods: {
      //刷新整个页面
      flush(){
          location.reload()
         },
      
      findAllprojectname() {
        this.$axios.post("/project/getAllProjectName").then(resp => {
          this.options.projectName = resp.data.data

        })
      },
      selectProption() {

        JSON.stringify(this.option)
        console.log(111)
        console.log(this.option)
        this.$axios.post("/StatisticAlanalysis/SelectAllDefectType", this.option).then(resp => {
          this.Proption = resp.data.data
          console.log(this.Proption)
          this.pipe()
        })
      },

      pipe() {

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        var option = {
          title: {
            text: '缺陷占比',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [{
            name: 'Access From',
            type: 'pie',
            radius: '50%',


            data:this.Proption,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }

        myChart.setOption(option);
      },
      exportTo(){
       // 获取echarts数据
          var cityData = this.Proption
          // excel表头
           console.log(33)
          console.log(cityData)
          var tHead = ['缺陷分类', '缺陷个数']
          // excel表体
          var tData = [];
          // excel文件名
          var tName = `缺陷分类表`
          // 循环添加excel表体, key需跟表头对应
            cityData.forEach(item => {
                 tData.push({
                   '缺陷分类': item.name,

                   '缺陷个数': item.value
                 })
                });

          // 导出
          this.exportDataExcel(tHead, tData, tName)
      }


    },
    created() {
      this.findAllprojectname()
      this.selectProption()
    }

  }
</script>

<style>
  .top {
    position: relative;
    float: left;
    left: 3%;
    /* margin-left: 1.25rem; */
  }

  .time {
    text-align: left;
  }

  .top_button {
    position: relative;
    float: right;
    right: 3%;
  }
  #main{
    position: relative;
    top: 100px;
  }
</style>
